<template>
    <div class="boxContentCss">
        <el-form ref="formRef" :model="form" label-position="right" label-width="auto">
            <EdCreateCard title="基本信息">
                <template #back>
                    <div class="createBack" @click="$utilsSet.goBack($router)" >
                        <svg-icon icon-class="back" /> 返回
                    </div>
                </template>
                <div class="zh_flex">
                    <el-form-item label="批量选择房间" class="width-50">
                        <RoomInput class="mr-2" multiple :rooms.sync="form.rooms" @update:rooms="houseInput"/>
                    </el-form-item>
                    <el-form-item label="收费类型" class="width-50" prop="payCause" :rules="validate.validates({required:true,msg:'收费类型不能为空'})">
                        <EdSelect v-model="form.payCause" :selectParams="data.selectParamsPayCause"></EdSelect>
                    </el-form-item>
                    <el-form-item label="收费单价" class="width-50" prop="unitPrice" :rules="validate.validates({required:true,msg:'收费金额不能为空', type: 'money'})">
                        <el-input class="flex-input" placeholder="请输入收费单价" v-model="form.unitPrice"></el-input>
                        <div class="specialText">注：物业费会根据单价*房屋实际面积计算</div>
                    </el-form-item>
                    <!-- <el-form-item label="收费总金额" class="width-50" prop="paymentAmount">
                        <el-input class="flex-input" v-model="form.paymentAmount" disabled></el-input>
                    </el-form-item> -->
                    <el-form-item label="备注信息" class="width-50" prop="annotation">
                        <el-input class="flex-input" placeholder="请输入备注信息" v-model="form.annotation" maxlength="100"></el-input>
                    </el-form-item>
                </div>
                <el-form-item class="form_btns">
                    <el-button class="ed-button ed_black-bottom" @click="onSubmit()" :loading="data.disabled">发送</el-button>
                    <el-button class="ed-button ed_white_bottom" @click="$utilsSet.goBack($router)">取消</el-button>
                </el-form-item>
            </EdCreateCard>
        </el-form>
    </div>
</template>

<script setup>
    import EdCreateCard from 'src/components/EdCreateCard.vue'
    import EdSelect from 'src/components/EdSelect.vue'
    import { payTaskBatchAdd } from "./api";
    import RoomInput from 'src/components/HousePicker/RoomInput.vue'
    import { onActivated, onDeactivated, reactive, ref } from 'vue'
    import router from 'src/router'
    import message from 'src/utils/once-message'
    import * as validate from "src/utils/validate"
    const form = reactive({
        villages: [],
        stages: [],
        buildings: [],
        units: [],
        roomIds: [],
        payCause: '',
        unitPrice: '',
        // paymentAmount: '',
        annotation: '',
        rooms: null
    })
    const data = reactive({
        pickerParams:{
            valueFormat:"yyyy-MM-dd"
        },
        disabled:false,
        selectParamsPayCause:{
            options: [{
                value: '0',
                label: '物业费'
            }, {
                value: '1',
                label: '车位费'
            }, {
                value: '2',
                label: '其他'
            }],
            placeholder:"请选择收费类型"
        }
    })

    onActivated(()=>{})
    const formRef = ref()
    onDeactivated(()=>{
        Object.assign(form, {
            villages: [],
            stages: [],
            buildings: [],
            units: [],
            roomIds: [],
            payCause: '',
            unitPrice: '',
            // paymentAmount: '',
            annotation: '',
            rooms: null
        })
        formRef.value.resetFields()
    })

    function onSubmit(){
        formRef.value.validate((valid) => {
            if(valid){
                data.disabled = true;
                let query = form.copy();
                delete query['rooms'];
                payTaskBatchAdd(query).then(response => {
                    if(response.code == 20000) {
                        data.disabled = false;
                        message.success({
                            message: '保存成功',
                            center: true,
                            duration: 2000,
                        });
                        form.id = response.data;
                        window.setTimeout(() => {
                            // router.back()
                            router.push({
                                path: '/charge/task'
                            })
                        }, 600)
                    }else {
                        data.disabled = false
                    }
                }).catch(()=>{
                    data.disabled = false
                })
            }
        })
    }
    function houseInput(data){
        Object.assign(form, {
            villages: data&&data['village'],
            stages: data&&data['stages'],
            buildings: data&&data['building'],
            units: data&&data['unit'],
            roomIds: data&&data['room'],
        })
    }
</script>

<style scoped lang="scss">
    :deep .el-form-item{
        .el-form-item__content{
            .el-input{
                //  input{
                    // width: 400px !important;
                    width: 60% !important;
                // }
            }
            .el-select{
                width: 60% !important;
                .el-input{
                    width: 100% !important;
                }
            }
            .el-cascader{
                width: 100% !important;
            }
        }
    }
    .img_center{
        display: flex;
        align-items: center;
    }
    .form_btns{
        margin-left: 47px;
    }
    .specialText{
        font-family: 'Noto Sans SC';
        font-style: normal;
        font-weight: 400;
        font-size: 12px;
        line-height: 18px;
        color: #F56C6C;
    }
</style>